import React, { useState } from 'react';
import {
    HomeOutlined,
    DatabaseOutlined,
    LoginOutlined
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu,Dropdown,Space,Avatar } from 'antd';
import "./index.less";
import {Link} from "react-router-dom";
const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
    } as MenuItem;
}

const items: MenuItem[] = [
    getItem('主页', '1', <HomeOutlined />),
    getItem('数据管理', 'sub1', <DatabaseOutlined />, [
        getItem('数据字典', '3')
    ])
];
const menu = (
    <Menu
        items={[
            {
                key: '1',
                label: (
                    <Link to={"/"}>返回首页</Link>
                ),
                icon: <HomeOutlined />
            },
            {
                key: '2',
                label: (
                    <Link to={"/"}>退出登陆</Link>
                ),
                icon: <LoginOutlined />
            },
        ]}
    />
);
const Index: React.FC = () => {
    // 是否收起
    const [collapsed, setCollapsed] = useState(false);

    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
                <div className="logo">
                    <img src={require("@/assets/img/logo.png")} alt=""/>
                    <span style={{display:collapsed?"none":"inline-block"}}>尚医通管理系统</span>
                </div>
                <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
            </Sider>
            <Layout className="site-layout">
                <Header className="site-layout-background" style={{ padding: 0 }} >
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>User</Breadcrumb.Item>
                        <Breadcrumb.Item>Bill</Breadcrumb.Item>
                    </Breadcrumb>


                    <Space>
                        <span>欢迎回来xxxxn！</span>
                        <Dropdown overlay={menu}>
                            <a onClick={e => e.preventDefault()}>
                                <Avatar src="https://joeschmoe.io/api/v1/random" />
                            </a>
                        </Dropdown>
                    </Space>

                </Header>
                <Content style={{ margin: '5px' }}>

                    <div className="site-layout-background" style={{ padding: 24, height:"100%" }}>
                        Bill is a cat.
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
            </Layout>
        </Layout>
    );
};

export default Index;